<template>
  <div class="app">
    <div class="welcome">
        <header>
        <h1>欢迎使用Sosi接口测试平台</h1>
        </header>
    </div>  
    <div class="navigation">
      <div class="image">

      </div> 
      <div class="sidebar">
        <nav>
          <ul>
            <li @click="goTo('项目管理')">项目管理
              <ul>
                <li @click="goTo('新建项目')">新建项目</li>
                <li @click="goTo('项目修改')">项目修改</li>
              </ul>
            </li>
          </ul>
        </nav>
      </div>
    </div>  
   
    <!-- <div class="content">
      <h2>{{ currentPage }}</h2>
      <div v-if="currentPage === '接口请求'">
        <div class="container-request">
          <header>
            <h3>接口请求</h3>
          </header>
          <label>请求方法：</label>
          <input v-model="method" type="text">
          <label>请求URL：</label>
          <input v-model="url" type="text">
          <button @click="sendRequest">发送请求</button>
          <div class="response-data">{{ responseData }}</div>
        </div>
      </div> -->
    <!-- </div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      method: 'GET',
      url: '',
      responseData: '',
      currentPage: '接口请求'
    };
  },
  methods: {
    sendRequest() {
      const requestOptions = {
        method: this.method,
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ key: 'value' })
      };

      fetch(this.url, requestOptions)
        .then(response => response.text())
        .then(data => {
          this.responseData = data;
        })
        .catch(error => {
          this.responseData = '请求失败：' + error;
        });
    },
    goTo(page) {
      this.currentPage = page;
    }
  }
};
</script>

<style>

.app {
  display: flex;
}

.welcome{
  position: absolute;
  left:450px;
  /* margin-top: 100px;
  text-align: center;  */
  /* max-width: 850px;
  margin: 50px auto; */
  /* padding: 10px; */
  /* border: 1px solid #cccccc75;
  border-radius: 5px;
  background-color: #f9f9f968; */
}

.navigation{
  position: absolute;
  border: 10px solid #1342cf;
}

.sidebar {
  position:absolute;
  padding: 30px;
}

.sidebar ul {
  list-style: none;
}

.sidebar ul li {
  cursor: pointer;
}

.sidebar ul li ul {
  display: none;
  padding-left: 10px;
}

.sidebar ul li:hover ul {
  display: block;
}

.content {
  padding: 10px;
}

.container-request {
  border: 1px solid #ccc;
  padding: 10px;
}

.response-data {
  margin-top: 10px;
}
</style>